<template>
    <div class="liveCart">
        <div class="item" v-for="item in goods" :key="item.id" @click="toGoods(item.id)">
            <div class="mainImg">
                <img :src="imgH+item.img">
            </div>
            <div class="right">
                <div class="title">
                    <div class="img">
                        <img src="./baoyou.png">
                    </div>
                    {{item.name}}
                </div>
                <div class="cost">
                    <div class="costCell pink" v-if="item.act.cashReward">送代金券¥{{item.act.cashReward.split('_')[1]}}</div>
                    <div class="costCell org" v-if="item.act.voucherReward">立返¥{{item.act.voucherReward.split('_')[1]}}购物券</div>
                </div>
                <div class="button">
                    <div class="num">
                        <div class="price">
                            <span class="nowPrice">¥{{item.nowPrice}}</span>
                            <span class="oldPrice" v-if="item.oldPrice">¥{{item.oldPrice}}</span>
                        </div>
                        <div class="buyNum" v-if="showPel">9999人付款</div>
                    </div>
                    <div class="toCart">
                        <i class="iconfont icongouwuche1x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "liveCart",
        data(){
          return{
              imgH:process.env.VUE_APP_IMG_DOMAIN,
          }
        },
        props:{
            showPel:{
                type:Boolean,
                default:true
            },
            goods:{
                type:Array,
                default: ()=>{}
            }
        },
        methods:{
            toGoods(id){
                this.$router.push({
                    path:'/detail',
                    query:{id}
                })
            }
        }
    }
</script>

<style scoped>
.item{
    display: flex;
    width: 100%;
    height: 120px;
    margin-top: 10px;
    background-color: #fff;
}
.mainImg{
    width: 120px;
    height: 120px;
}
.mainImg img{
    width: 120px;
    height: 120px;
}
.right{
    flex: 1;
    padding: 10px;
}
.right .title{
    height: 36px;
    font-size: 13px;
    color: #303333;
    line-height: 18px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.right .title img{
    position: absolute;
    width: 24px;
    height: 14px;
    bottom: -4px;
}
.right .title .img{
    position: relative;
    display: inline-block;
    width: 24px;
}
.cost{
    display: flex;
    font-size: 8px;
    margin-top: 6px;
}
.cost .costCell{
    padding: 1px 5px;
    margin-right: 10px;
}
.pink{
    color: #F7416B;
    background: #FAE8EC;
}
.org{
    color: #FBA51A;
    background: #FCF6EB;
}
.button{
    margin-top: 5px;
    display: flex;
    width: 100%;
    /*padding-right: 25px;*/
    justify-content: space-between;
}
.button .price {
    line-height: 22px;
}
.button .price .nowPrice{
    font-size: 18px;
    font-family: DIN-Medium, DIN;
    font-weight: 500;
    color: #00C3BD;
    margin-right: 5px;
}
.button .price .oldPrice{
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C0CCCC;
}
.button .buyNum{
    height: 14px;
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C0CCCC;
    line-height: 14px;
}
.button .toCart{
    color: #00C3BD;
    padding-right: 10px;

}
.button .toCart .icongouwuche1x{
    font-size: 33px;
}

</style>